<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>操作日志</title>
    <link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table/index.css">
    <link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
    <link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
    <script type="text/javascript" src="../../lib/vue/vue.js"></script>
    <script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
    <script type="text/javascript" src="../../lib/element-ui/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
    <script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
    <script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
    <script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
    <script type="text/javascript" src="../../static/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../static/js/webApi.js"></script>
    <style type="text/css">
        /*
            找到html标签、body标签，和挂载的标签
            都给他们统一设置样式
        */
        html,
        body,
        #app,
        .el-container {
            /*设置内部填充为0，几个布局元素之间没有间距*/
            padding: 0px;
            /*外部间距也是如此设置*/
            margin: 0px;
            /*统一设置高度为100%*/
            height: 100%;
        }
        .el-main {
            padding: 4px;
        }
		.el-icon-search{
			color: #409EFF;
		}
		.el-icon-refresh-right{
			color: #409EFF;
		}
    </style>
</head>

<body>
    <el-container id="app">
        <el-main>
            <el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
                size="mini" style="height: 36px">
				<el-form-item label="日志类型">
				   	<el-input v-model="queryData.logType" placeholder="请输入日志类型"></el-input>
				</el-form-item>
                <el-form-item label="时间">
                   	<el-date-picker v-model="queryData.beginTime" type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
                </el-form-item>
				<el-form-item>
					<el-date-picker v-model="queryData.endTime" type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
                <el-form-item>
                    <el-button size="mini"  icon="el-icon-search" @click="searchEvent('queryData',1)">查询</el-button>
                    <el-button size="mini"  icon="el-icon-refresh-right" @click="searchEvent('queryData',0)">重置
                    </el-button>
                </el-form-item>
            </el-form>

            <vxe-grid border stripe ref="xGrid" resizable show-overflow highlight-current-row="true" keep-source
				@page-change="handlePageChange" :height="tableHeight" size="mini" class="checkbox-table" :checkbox-config="{ trigger: 'row'}"
                :pager-config="tablePage"  :data="logData" :loading="tableLoading"
                :export-config="tableExport" @toolbar-button-click="toolbarButtonClickEvent"  :header-cell-style="{'text-align':'center'}">
                <vxe-table-column type="checkbox" width="60" align="center"></vxe-table-column>
                <vxe-table-column type="seq" title="序号" width="60" align="right">
                </vxe-table-column>
                <vxe-table-column field="logId" title="日志编号" width="250" align="right"
                    :visible="visible">
				</vxe-table-column>
				<vxe-table-column field="logType" title="日志类型" width="150" align="left">
				</vxe-table-column>
				<vxe-table-column field="logUserIp" title="ip地址" width="100" align="left">
				</vxe-table-column>
                <vxe-table-column field="userName" title="操作人" width="120" align="right">
                </vxe-table-column>
                <vxe-table-column field="logRequestTime" title="操作时间" width="150" align="right">
                </vxe-table-column>
                <vxe-table-column field="logUrl" title="地址" width="200" align="left">
                </vxe-table-column>
                <vxe-table-column field="logData" title="参数" width="270" align="left">
                </vxe-table-column>
				<vxe-table-column field="logResultCode" title="结果状态" width="100" align="left">
				</vxe-table-column>
				<vxe-table-column field="logResultMsg" title="返回结果" width="520" width="250" align="left">
				</vxe-table-column>
            </vxe-grid>

        </el-main>
    </el-container>
</body>
<script type="text/javascript">
    window.onload = function () {
        var main = {
            data() {
                return {
                    loading: false,
                    disabled: false,
                    visible: false,
                    tableHeight: '100%',
                    tablePage: {
                        perfect: true,
                        total: 0,
                        currentPage: 1,
                        pageSize: 15,
                        align: 'left',
                        pageSizes: [15, 30, 45, 60, 75, 90],
                        layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
                            'Total'
                        ],
                    },
                    tableExport: {
                        filename: 'export',
                        sheetName: 'Sheet1',
                        type: 'xlsx',
                        // 自定义类型
                        types: ['xlsx', 'csv', 'html', 'xml', 'txt']
                    },
                    submitLoading: false,
                    queryData: {
                    	logId: "",
						logType: "",
						logUserIp: "",
						logRequestTime:"",
						logUrl:"",
						logData: "",
						logResultCode: "",
						logResultMsg: ""
                    },
                    logTypeOptions: [],
                    logResultCodeOptions: [],
					logData:[],
					tableLoading: false,
                }
            },
            created() {
				this.findList();
            },
            mounted() {
                this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 5;
            },
            methods: {
				//获取列表信息
				findList() {
					let queryParams = Object.assign({
						page: this.tablePage.currentPage,
						rows: this.tablePage.pageSize,
						beginTime:this.queryData.beginTime,
						endTime:this.queryData.endTime,
						keyword: this.queryData.logType,
					});
					this.dataLoading = true;
					var object = this;
					webApi("/log/listUserLog", "post", queryParams, function(data) {
						object.logData = data.data.rows;
						object.tablePage.total = data.data.total;
						object.tableLoading = false;
					}, function(data) {
						object.tableData = [];
						object.tablePage.total = 0
						object.tableLoading = false;
					});
				},
                batchRemove() {
                    var rows = this.$refs.xGrid.getCheckboxRecords();
                    if (rows.length <= 0) {
                        this.$XModal.message({
                            message: '请选择需要删除的记录',
                            status: 'error'
                        });
                        return false;
                    }
                    this.$XModal.confirm(`您确定要把当前选中的数据删除吗?`).then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign(rows);
                            XEAjax.post(`${curl}/log/batchRemove`, params).then(data => {
                                if (data.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'success'
                                    });
                                } else {
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'error'
                                    });
                                }
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                removeEvent(row) {
                    this.$XModal.confirm('您确定要删除该数据?').then(type => {
                        if (type === 'confirm') {
                            this.submitLoading = true;
                            let params = Object.assign(row);
                            XEAjax.post(`${curl}/log/delete`, params).then(data => {
                                if (data.code == 200) {
                                    this.$refs.xGrid.commitProxy('reload');
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'success'
                                    });
                                    this.showEdit = false;
                                } else {
                                    this.$XModal.message({
                                        message: data.msg,
                                        status: 'error'
                                    });
                                }
                            });
                            this.submitLoading = false;
                        }
                    });
                },
                queryChange() {
                    this.$refs.xGrid.commitProxy('reload');
                },
				//分页
				handlePageChange({
					currentPage,
					pageSize
				}) {
					this.tablePage.currentPage = currentPage
					this.tablePage.pageSize = pageSize
					this.findList()
				},
                searchEvent(formName, acType) {
                    if (acType == 0) {
                        this.queryData = {
                            logType: "",
                            beginTime: "",
							endTime:""
                        }
                        this.findList();
                    }
					this.tablePage.currentPage = 1;
                    this.findList();
                },
                formatDate({
                    cellValue
                }) {
                    return XEUtils.toDateString(cellValue, 'yyyy-MM-dd')
                },
                toolbarButtonClickEvent({
                    code
                }, event) {
                    switch (code) {
                        case 'btnRemove':
                            this.batchRemove();
                            break;
                        case 'btnExport':
                            this.$refs.xGrid.exportData({
                                filename: '日志列表',
                                sheetName: 'Sheet1',
                                type: 'xlsx'
                            });
                            break;
                    }
                },
                checkColumnMethod({
                    column
                }) {
                    if (['logType', 'logResultCode'].includes(column.property)) {
                        return false
                    }
                    return true
                },
			
				
				
            }
        };

        var vue = Vue.extend(main);
        new vue().$mount('#app');
    }
</script>

</html>